<template>
  <!--操作日志组建-->
  <div class="operation-log">
    <el-table :data="tableData" :default-sort="{prop: 'propertyName'}" style="width: 100%" v-loading="loading">
      <el-table-column prop="propertyName" label="属性名称" width="120" align="center">
      </el-table-column>
      <el-table-column label="时间" width="180" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.logTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="属性值" width="300" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.propertyType==='DateTime'">
            {{timestampToTime(JSON.parse(scope.row.value))}}
          </template>
          <template v-else>
            {{scope.row.value}}
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作类型" width="60" align="center">
        <template slot-scope="scope">
          {{getOperationType(scope.row.logType)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" v-show="filterData(scope.row.propertyName)[0].logTime===scope.row.logTime" @click="handleCallBack(scope.$index, scope.row)">撤销</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
import util from '@/utils'
import { revokeLog } from '@/api/archives'
export default {
    name: 'operationLog',
    data () {
        return {

        }
    },
    props: {
        tableData: Array,
        loading: Boolean
    },
    methods: {
    // 格式化时间
        timestampToTime (timestamp) {
            return util.timestampToTime(timestamp)
        },
        // 获取操作类型
        getOperationType (type) {
            let tempType = ''
            switch (type) {
            case 'S':
                tempType = '添加'
                break
            case 'U':
                tempType = '修改'
                break
            default:
                tempType = '删除'
            }
            return tempType
        },
        filterData (name) {
            return this.tableData.filter(function (item) {
                return item.propertyName === name
            })
        },
        // 撤销
        handleCallBack (index, row) {
            this.$confirm('确定撤销?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let logId = row.logId
                revokeLog({ logId: logId }).then(response => {
                    this.$message({
                        type: 'success',
                        message: '撤销成功'
                    })
                    this.$emit('get_opreation_log')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消撤销'
                })
            })
        }
    }
}
</script>
<style lang="less" >
.operation-log {
	max-height: 400px;
	overflow-y: hidden;
	.el-table thead {
		color: #555;
	}
}
</style>
